<template>
  <div
    :class="{
      'card-wrapper': true,
      'is-layout': card.cardKey === 'formLayout',
    }"
  >
    <div
      v-if="displayName && card.cardKey !== 'formGroupTitle'"
      class="card-label"
    >
      <div class="text">
        {{ displayName.defaultValue }}
      </div>
    </div>
    <div class="card-field">
      <component
        :is="GetCardComponent(card)"
        :card="card"
        :mode="mode"
        :curBizObject="curBizObject"
        @updateValue="updateValue"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, watchEffect } from 'vue';
import { GetCardComponent } from '@/global/util/formDesign';

export default defineComponent({
  name: 'CardWrapper',
  components: {},
  props: {
    mode: {
      type: String,
      default: '',
    },
    card: {
      type: Object as any,
      default: () => ({}),
    },
    curBizObject: {
      type: Object as any,
      default: () => ({}),
    },
    formCards: {
      type: Array as any,
      default: () => [],
    },
  },
  setup(props) {
    const updateValue = (val: any, key: string, obj: any) => {
      Object.assign(obj, { [key]: val });
    };
    const displayName = computed(() => props.card.controls.displayName);
    // 可写模式对控件赋值
    watchEffect(() => {
      if (
        ['edit', 'copy'].includes(props.mode) &&
        !['layout', 'system'].includes(props.card.group)
      ) {
        const { cardCode, controls } = props.card;
        Object.assign(controls.ctlValue, {
          value: props.curBizObject[cardCode],
        });
      }
    });

    return {
      GetCardComponent,
      updateValue,
      displayName,
    };
  },
});
</script>
<style lang="less" scoped>
.card-wrapper {
  position: relative;
  padding: 12px 24px;
  min-height: 52px;
  &.is-layout {
    padding: 12px 0;
  }
  .card-label {
    .text {
      margin-bottom: 4px;
      line-height: 22px;
      font-weight: 600;
      word-break: break-word;
    }
  }
}
</style>
